<template>
  <ContentWrap>
    <el-row :body-style="{ padding: 0 }" class="spuItem">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-image
          :fit="'fill'"
          :src="spuItem.picUr || defaultProductImg"
          :preview-src-list="Array.of(spuItem.picUrl || '')"
        />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-text line-clamp="2" class="goods-title custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
          {{ spuItem.spuName }}
        </el-text>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="flex items-baseline">
          <div class="custom-text-20 goods-price flex items-baseline">
            <span class="custom-text-12">折算价格 ￥ </span>
            <span>
              {{ fenToYuan(spuItem.price) }}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <slot name="itemButton"></slot>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="replaceItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { fenToYuan } from '@/utils'
import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图

defineProps({
  // 选中的门店列表
  spuItem: propTypes.object.def({})
})

onMounted(() => {})
</script>
<style lang="scss"></style>
